<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>大事件-文章</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
  </head>

  <body>
    <div class="header">
      <a href="#" class="logo fl"><img src="images/logo.png" alt="logo"/></a>
      <div class="search_form fl">
        <input type="text" class="search_txt" placeholder="黑洞照片" />
        <button class="search_btn"><i class="fa fa-search"></i></button>
      </div>
      <div class="link_info fr">
        <a href="#"><i class="fa fa-angle-right"></i>&nbsp;&nbsp;网站地图</a
        ><br />
        <a href="#"><i class="fa fa-angle-right"></i>&nbsp;&nbsp;招聘信息</a>
      </div>
    </div>

    <div class="menu_con">
      <div class="menu">
        <div class="menu_collapse fl">
          <a href="javascript:;" class="level_one"
            ><i class="fa fa-list-ul"></i>全部分类</a
          >
          <ul class="level_two">
            <li class="up"></li>
            <li><a href="#">最 新</a></li>
            <li><a href="#">科 技</a></li>
            <li><a href="#">股 市</a></li>
            <li><a href="#">商 品</a></li>
            <li><a href="#">外 汇</a></li>
            <li><a href="#">公 司</a></li>
          </ul>
        </div>
        <ul class="left_menu fl">
          <li><a href="#">最 新</a></li>
          <li><a href="#">科 技</a></li>
          <li><a href="#">股 市</a></li>
          <li><a href="#">商 品</a></li>
          <li><a href="#">外 汇</a></li>
          <li><a href="#">公 司</a></li>
        </ul>
        <ul class="right_menu fr">
          <li><a href="#">科技专题</a></li>
          <li><a href="#">财经专题</a></li>
        </ul>
      </div>
    </div>

    <div class="main_con clearfix">
      <div class="left_con setfr">
        <div class="breadcrumb">
          当前位置： <a href="#">首页</a> &gt; <a href="#">科技</a> &gt;
          文章详情
        </div>
        <h3 class="article_title">
          马斯克的新花样？连接人脑和电脑的初创公司又筹了一笔钱
        </h3>
        <div class="article_info">
          杰克 发布于 2019-05-08 07:08:46&nbsp;&nbsp;&nbsp;分类:
          奇趣事&nbsp;&nbsp;&nbsp;阅读: (98)&nbsp;&nbsp;&nbsp;评论: (0)
        </div>
        <div class="article_con">
          <p>
            “上天入地”还不够？硅谷“钢铁侠”马斯克名下一家低调的公司最近又融了一大笔钱。
          </p>

          <p>
            马斯克投资的一家小型且不为人熟知的脑机接口（brain-computer
            interface）公司Neuralink披露，该公司融到了3900万美元，虽然不及公司计划的融资额5100万美元，但也比上次的融资多了不少。
          </p>

          <p>两年前该公司曾计划融资1亿美元，但只拿到了2700万美元的融资。</p>

          <p>
            在Neuralink递交给美国证券交易委员会（SEC）的材料中，并没有披露融资是否来自传统的风险投资者或者来自该公司的员工。
          </p>

          <p>
            2016年，Neuralink在美国加利福尼亚州以医学研究公司的名义成立，之后一直低调运行。
          </p>
        </div>
        <div class="article_links">
          上一篇： <a href="#">世界第一台可以玩游戏的冰箱</a><br />
          下一篇：
          <a href="#"
            >世界第一个可以玩游戏的马桶、世界上第一个可以玩游戏的茶杯</a
          >
        </div>

        <form action="" class="comment_form">
          <div class="form_group">
            <label>用户名：</label>
            <input
              type="text"
              placeholder="请输入用户名"
              class="comment_name"
            />
          </div>
          <div class="form_group">
            <label>评论内容：</label>
            <textarea
              placeholder="请发表您的评论"
              class="comment_input"
            ></textarea>
          </div>
          <div class="form_group">
            <input type="submit" name="" value="评 论" class="comment_sub" />
          </div>
        </form>

        <div class="comment_count">
         评论列表展示 
        </div>

        <div class="comment_list_con">
          <!-- 评论列表 -->
          
        </div>
      </div>
      <div class="right_con setfl">
        <div class="common_wrap">
          <h3><i class="fa fa-bar-chart"></i> 一周热门排行</h3>
          <ul class="content_list hot">
            <!-- 热门排行 -->
          </ul>
        </div>
        <div class="common_wrap">
          <h3><i class="fa fa-commenting-o"></i> 最新评论</h3>
          <ul class="content_list comment_list commit">
            <!-- 最新评论 -->
          </ul>
        </div>
        <div class="common_wrap">
          <h3><i class="fa fa-bullseye"></i> 焦点关注</h3>
          <ul class="content_list guanzhu_list">
            <!-- 焦点关注 -->
          </ul>
        </div>
      </div>
    </div>

    <div class="footer clearfix">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2019 深圳大事件信息技术股份有限公司 All Rights Reserved</p>
      <p>电话：0755-****888 粤ICP备*******8号</p>
    </div>

    <!-- 引入模板引擎js文件 -->
    <script src="./js/template-web.js"></script>
    <script src="./js/jquery-1.12.4.min.js"></script>
  </body>


  <!-- 1.文章详情 -->
  <script id="author_list" type="text/html">
    {{data.author}} 发布于 {{data.date}}&nbsp;&nbsp;&nbsp;分类: {{data.category}}&nbsp;&nbsp;&nbsp;阅读:
    ({{data.read}})&nbsp;&nbsp;&nbsp;评论: ({{data.comments}})
  </script>


  <!-- 热门排行模板 -->
  <script type="text/html" id="hotId">
    {{each data}}
    {{if $index == 0}}
    <li><span class="first">{{$index + 1}}</span><a href="#">{{$value.title}}</a></li>
    {{else if $index == 1}}
    <li><span class="second">{{$index + 1}}</span><a href="#">{{$value.title}}</a></li>
    {{else if $index == 2}}
    <li><span class="third">{{$index + 1}}</span><a href="#">{{$value.title}}</a></li>
    {{else}}
    <li><span>{{$index + 1}}</span><a href="#">{{$value.title}}</a></li>
    {{/if}}
    {{/each}}
  </script>


  <!-- 最新评论模板 -->
  <script type="text/html" id="commitId">
    {{each data}}
    <li>
     <span>{{$value.author}}</span>
     <b><em>{{$value.author}}</em> {{$value.date}} {{$value.time}}说:</b>
     <strong>{{$value.intro}}</strong>
     </li>
    {{/each}}



  </script>

 <!-- 焦点关注模板 -->
 <script type="text/html" id="fousId">
 {{each data}}
 <li><a href="./list.html">{{$value.intro}}</a></li>
 {{/each}}
</script>

<!-- 评论列表模板 -->
<script type="text/html" id="commentId">
{{each data}}
<div class="comment_detail_list">
    <div class="person_pic fl">{{$value.author}}</div>
    <div class="name_time fl"><b>{{$value.author}}</b><span>{{$value.date}} {{$value.time}}</span></div>
    <div class="comment_text fl">
     {{$value.content}}
    </div>
  </div>
{{/each}}
</script>

  <script>
    $(function() {
    // 文章详情
      var id = window.location.search.split("=")[1];
    //   console.log(id)
      $.ajax({
        type: "get",
        url: "http://localhost:8080/api/v1/index/article",
        data: {
          id: id
        },
        success: function(res) {
          if (res.code == 200) {
            $(".article_title").text(res.data.title);
            $(".article_con").html(res.data.content);
            let resH = template("author_list", res);
            $(".article_info").html(resH);
          }
        }
      });

      //    热门排行
      $.get({
        url: "http://localhost:8080/api/v1/index/rank",
        success: function(res) {
          if (res.code == 200) {
            let htmlStr = template("hotId", res);
            $(".hot").html(htmlStr);
          }
        }
      });

      //    最新评论模板
      $.get({
        url: "http://localhost:8080/api/v1/index/latest_comment",
        success: function(res) {
          if (res.code == 200) {
            let htmlStr = template("commitId", res);
            $(".commit").html(htmlStr);
          }
        }
      });
    

    // 焦点关注
    $.get({
        url : 'http://localhost:8080/api/v1/index/attention',
        success : function(res){
            if(res.code == 200){
     let htmlStr = template('fousId',res);
     $('.guanzhu_list').html(htmlStr);
            }
        }
    });

    // 评论列表
    $.get({
        url : 'http://localhost:8080/api/v1/index/get_comment',
        data : {
            articleId : id
        },
        success : function(res){
            // console.log(res);
            if(res.code == 200){
            let htmlStr = template('commentId',res);
           $('.comment_list_con').html(htmlStr);
            }
        }
    })


});
  </script>
</html>
